<template>
  <el-dialog :model-value="visible" @update:model-value="updateVisible" title="卡片编辑" width="400px">
    <el-form :model="formData" label-width="80px">
      <el-form-item label="卡片备注">
        <el-input v-model="localFormData.remark" />
      </el-form-item>
      <el-form-item label="显示状态">
        <el-radio-group v-model="localFormData.statedel">
          <el-radio label="0">显示</el-radio>
          <el-radio label="1">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="固定位置">
        <el-switch v-model="localFormData.static" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue';

const props = defineProps({
  visible: Boolean,
  formData: Object
});

const emit = defineEmits(['update:visible', 'confirm']);

// 创建本地表单数据的副本
const localFormData = reactive({...props.formData});

// 监听props.formData变化，更新本地数据
watch(() => props.formData, (newValue) => {
  Object.assign(localFormData, newValue);
}, { deep: true });

// 更新可见性的处理函数
const updateVisible = (val) => {
  emit('update:visible', val);
};

const handleConfirm = () => {
  // 确认时发送本地数据
  emit('confirm', localFormData);
  emit('update:visible', false);
};
</script>